#![allow(non_snake_case)]
use leptos::prelude::*;

// 导入服务器函数
use crate::utils::server_functions::{get_role};

#[component]
pub fn RoleComponent(
    #[prop(optional, into)]
    sel_role_id: RwSignal<Option<u32>>,
) -> impl IntoView {
    // 获取角色数据
    let role_items = Resource::new(
        move || (),
        |_| async { get_role().await }
    );
    
    view! {
        <div class="bg-white shadow rounded-lg p-4 flex-1 flex flex-col min-h-1">
            <h1 class="text-xl font-bold mb-4">角色列表</h1>            
            <Suspense fallback=|| view! { <progress class="progress w-56"></progress> }>
            {
                move || match role_items.get() {
                    Some(Ok(roles)) => {
                        view! {
                            <div class="flex-1 overflow-y-auto min-h-1">
                                <ul class="space-y-2">
                                    <For
                                        each=move || roles.clone()
                                        key=|role| role.id.clone().to_string()
                                        children=move |role| {
                                            let role_id = role.id.clone();
                                            let click_role_id = role_id.clone();
                                            // 判断当前角色是否被选中
                                            let is_selected = move || sel_role_id.get() == Some(click_role_id);
                                            view! { 
                                                <li 
                                                    class=move || {
                                                        if is_selected() {
                                                            "p-3 bg-blue-50 text-blue-700 rounded-lg cursor-pointer transition-colors duration-200"
                                                        } else {
                                                            "p-3 hover:bg-gray-100 rounded-lg cursor-pointer transition-colors duration-200"
                                                        }
                                                    }
                                                    on:click=move |_| {
                                                        // 更新内部状态
                                                        sel_role_id.set(Some(click_role_id));
                                                    }
                                                >
                                                    {role.name}
                                                </li>
                                            }
                                        }
                                    />
                                </ul>
                            </div>
                        }
                    }.into_any(),
                    Some(Err(e)) => view! { 
                        <div class="text-red-500">
                            {format!("获取角色数据时出错: {}", e)}
                        </div>
                    }.into_any(),
                    None => {
                        view! { <div class="flex-1 flex items-center justify-center">正在加载角色数据...</div> }
                    }.into_any(),
                }
            }
            </Suspense>
        </div>

    }.into_any()
}
